/* 元素变换 transform */

/* translate() 移动元素位置 不会影响其他元素*/
.box1 {
    width: 200px;
    height: 200px;
    background-color: paleturquoise;
    transform: translate(200px, 100px);
    transform: translateX(400px);
    transform: translateY(500px);
    transform: translate(50%, 50%);
}

.box2 {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
}

.box3 {
    width: 100px;
    height: 100px;
    background-color: palevioletred;
    position: absolute;
    left: 250px;
    top: 250px;
    transform: translate(-50%, -50%);
}

/* 旋转 rotate() 整数是顺时针旋转 负数是逆时针旋转*/
.box4 {
    width: 100px;
    height: 100px;
    background-color: palegreen;
    margin: auto;
    transition: 2s;
}

.box4:hover {
    transform: rotate(-720deg);
    transform: rotateZ(180deg);
}

/* 元素缩放 scale() 父元素放大，子元素跟着放大*/
.box5 {
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transition: 2s;
}

.box5:hover {
    transform: scale(2, 4);
}

p {
    transform: scale(0.1);
}

.box6 {
    margin: auto;
    width: 200px;
    height: 300px;
    border: 2px solid;
    position: relative;
    transition: 1s;
}

.box6 img {
    width: 200px;
    height: 300px;
}

.mask {
    width: 200px;
    height: 150px;
    background-color: aquamarine;
    position: absolute;
    bottom: 0;
    display: none;
}

.box6:hover .mask {
    display: block;
}

.box6:hover {
    transform: scale(1.5);
}


.box7 {
    margin: auto;
    width: 300px;
    height: 200px;
    background-color: paleturquoise;
    transform: skewX(45deg);
    /* transition: 1s; */
}

.box7:hover {
    transform: skewY(45deg);
}


.text:hover {
    display: inline-block;
    transform: rotate(180deg);
    transition: 1s;
}